let tbody=document.querySelector('tbody')
let data = JSON.parse(localStorage.getItem('cart')) || []
let cartTable=document.querySelector('.right')
let selectAll=document.querySelector('.selectAll')
let totalNum=document.querySelector('.totalNum')
let mone=document.querySelector('.money')
function render(){
  tbody.innerHTML=''
  if(!data.length){
    tbody.innerHTML = `
           <tr height="100">
             <td colspan="6" style=" background:url()250px 22px no-repeat">  
                <p style="font-weight: norml;"><a href="../index.html" style="color:#e5e5e5;margin-left:85px ">购物车空空的哦~，去看看心仪的商品吧~</a></p>
             </td>
           </tr>
        `
  }else{
    data.forEach(item=>{
      tbody.innerHTML+=`
              <tr>
              <td><input type="checkbox" value="" class="select" data-id="${item.goods_id}" ${item.is_select && "checked"}/></td>
              <td>
                  <img src="${item.img_small_logo}">
                  <span class="hide">${item.title}</span>
              </td>
              <td><span class="price">￥${item.price}</span></td>
              <td>
                  <span class="sub" data-id="${item.goods_id}">-</span>
                  <input type="text" value="${item.cart_number}" class="txt" data-id="${item.goods_id}" />
                  <span class="add" data-id="${item.goods_id}">+</span>
              </td>
              <td><span class="subTotal">￥${(item.cart_number * item.price).toFixed(2)}元</span></td>
              <td><span class="del" data-id="${item.goods_id}">删除</span></td>
          </tr>
          `
    })
  }
  localStorage.setItem('cart',JSON.stringify(data))
}
render()
cartTable.addEventListener('click',(event)=>{
  let target=event.target
  //全选
  if(target.className==='selectAll'){
    let type=target.checked
    data.forEach(item=>item.is_select=type)
    render()
    total()
  }
  //单选
  if(target.className==='select'){
    let id=target.dataset.id-0
    let goods=data.find(item=>item.goods_id===id)
    goods.is_select=!goods.is_select

    render()
    total()
  }
  //增加
  if(target.className==='add'){
    let id=target.dataset.id-0
    let goods=data.find(item=>item.goods_id===id)
    if(goods.cart_number>goods.goods_number){
      alert('仓库卖空了！欢迎下次再来')
      return false
    }
    goods.cart_number++
    render()
    total()
  }
  //减少
  if(target.className==='sub'){
    let id=target.dataset.id-0
    let goods=data.find(item=>item.goods_id===id)
    if(goods.cart_number<=1){
      goods.cart_number=1
      return false
    }
    goods.cart_number--
    render()
    total()
  }
  //删除
  if(target.className==='del'){
    let id=target.dataset.id-0
    let index=data.findIndex(item=>item.goods_id===id)
    data.splice(index,1)
    if(!data.length){
        selectAll.checked=false
    }
    render()
    total()
  }
  //删除全部
  if(target.className==='dlAll'){
    let res=data.filter(item=>item.is_select===false)
    data=res
    if(!data.length){
        selectAll.checked=false
    }
    render()
    total()
  }
},false)

function total(){
  let num=0
  let money=0
  data.forEach(item=>{
    if(item.is_select){
      num+=item.cart_number
      money+=item.cart_number*item.price
      let res=data.every(item=>item.is_select===true)
      if(res){
          selectAll.checked=true
      }else{
          selectAll.checked=false
   
      }
    }
  })
  totalNum.innerHTML=num
  mone.innerHTML='￥'+money+'元'
}
total()
